<template>
	<view v-if="detail.goods_name">
		<view style="padding-bottom: 50px">
			<!-- 轮播图区域 -->
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in detail.pics" @click="showPreview(index)">
					<image class="swiper-pic" :src="item.pics_sma"></image>
				</swiper-item>
			</swiper>

			<!-- 信息区域 -->
			<view class="info-box">
				<view class="price">
					￥ {{ detail.goods_price }}
				</view>
				<view class="title-box">
					<view class="title">
						{{ detail.goods_name }}
					</view>
					<view class="icon-box">
						<uni-icons size="25" type="star"></uni-icons>
						<view>
							收藏
						</view>
					</view>
				</view>
				<view class="yf">
					快递：免运费
				</view>
			</view>

			<!-- 内容区域 -->
			<rich-text :nodes="detail.goods_introduce"></rich-text>
		</view>
		<!-- 底部栏区域 -->
		<view class="nav-bottom">
			<!-- options绑定左侧图标的 -->
			<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters('cart', ['total'])
		},
		watch: {
			total: {
				handler() {
					// 就要让徽标跟着变
					this.options[1].info = this.total
				},
				// 代表页面一打开就执行一次
				immediate: true
			}
		},
		async onLoad(options) {
			const res = await uni.$http.get('goods/detail', {
				goods_id: options.goods_id
			})
			// 拿到数据后，我们需要对原始数据做更改，把里面的img全部替换成
			// img style="display:block;" 这样做的意义是为了让所有的img都有行内样式
			// 把他转成了块级元素，就不会认空格了
			res.data.message.goods_introduce = res.data.message.goods_introduce.replaceAll('<img',
				'<img style="display:block;"')
			this.detail = res.data.message
		},
		data() {
			return {
				detail: {},
				options: [{
					icon: 'shop',
					text: '店铺'
				}, {
					icon: 'cart',
					text: '购物车',
					info: 0
				}],

				customButtonGroup: [{
						text: '加入购物车',
						backgroundColor: '#f00',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
			};
		},
		methods: {
			buttonClick(e) {
				if (e.index === 0) {
					// 代表是加入购物车
					this.$store.commit('cart/addGoods', {
						goods_id: this.detail.goods_id,
						goods_name: this.detail.goods_name,
						goods_price: this.detail.goods_price,
						goods_small_logo: this.detail.goods_small_logo,
						goods_checked: true,
						goods_count: 1
					})
				}
			},
			// 左侧图标的点击事件
			onClick(e) {
				// 通过e可以区分点的是哪一个
				if (e.index === 1) {
					// 跳转到购物车页面
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			showPreview(index) {
				// 要调用自带的预览功能
				uni.previewImage({
					current: index,
					// 给数组，并且数组中每个元素是字符串
					// 字符串的内容就是图片的地址
					urls: this.detail.pics.map(v => v.pics_big)
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 500rpx;

		.swiper-pic {
			width: 100%;
			height: 100%;
		}
	}

	.info-box {
		margin: 10px;

		.price {
			font-size: 18px;
			font-weight: 700;
			color: #c00;
		}

		.title-box {
			margin: 10px 0;
			display: flex;

			.icon-box {
				width: 240rpx;
				text-align: center;
			}
		}

		.yf {
			color: #ccc;
			font-size: 13px;
		}
	}

	.nav-bottom {
		// 固定定位
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
</style>
